<template>
	<div class="MenuTree">
		<template v-for="item in menuDatalist">
			<el-submenu v-if="item.subs" :index="item.index" :key="item.index">
				<template slot="title">
					<i :class="item.icon"></i>
					<!-- 添加了无限级菜单之后，折叠功能无法正常隐藏第一级菜单的 span -->
					<!-- <span>{{ item.title }}</span> -->
					<!-- 通过 collapse 状态，以及菜单数据中添加的 collapseHidden 属性来控制 span 的隐藏状态 -->
					<span :hidden="collapse && item.collapseHidden">{{
						item.title
					}}</span>
				</template>
				<MenuTree :menuData="item.subs" :collapse="collapse">
				</MenuTree>
			</el-submenu>
			<el-menu-item v-else :index="item.index" :key="item.index">
				<i :class="item.icon"></i>
				<span :hidden="collapse && item.collapseHidden">{{
					item.title
				}}</span>
			</el-menu-item>
		</template>
	</div>
</template>

<script>
	import {
		getUserData,
		getData
	} from '@/utils/IndexedDB'
	export default {
		name: 'MenuTree',
		props: ['menuData', 'collapse'],
		data() {
			return {
				menuDatalist: '',
				tableData: '',
				postData: {
					opera: '',
					curPage: 1,
					pageSize: 1,
					dataTotal: 10,
				},
				userInfo: ''

			};
		},
		created() {
			
		},
		mounted() {
			this.initmenuData()
		},
		methods: {
			async initmenuData() {
				if (localStorage.getItem('ms_type')) {
					await getUserData('userBase', "infoBase", 0).then((res) => {
						this.userInfo = res
					})
				}
				let _than = this.userInfo.ms_type
				this.menuDatalist = this.menuData.filter(	(item) => {
					return item.route.includes(_than)	
				})
			},

		}
	};
</script>

<style>
	.el-submenu__title:hover {
		background-color: #065270 !important;
	}
</style>
